<template>
  <q-dialog :maximized="maximized" flat persistent ref="dialog">
    <q-form @submit="submit" :class="dialogSize" :style="formStyle">
      <h5 class="view_title justify-between q-px-md">
        {{ title }}
        <q-btn dense outline round icon="clear" size="sm" v-close-popup />
      </h5>
      <q-scroll-area class="col">
        <div class="row q-col-gutter-x-md dialog_form q-pa-md">
          <slot></slot>
        </div>
      </q-scroll-area>
      <div class="row justify-center q-pa-md">
        <q-btn v-if="hasClose" outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
        <q-btn v-if="hasSubmit" class="q-mx-md" color="primary" :loading="loading" icon="mdi-check-bold" label="提交" type="submit" />
      </div>
    </q-form>
  </q-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    formStyle: {
      type: String,
      required: false,
      default: '',
    },
    hasSubmit: {
      type: Boolean,
      required: false,
      default: true,
    },
    hasClose: {
      type: Boolean,
      required: false,
      default: true,
    },
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      mobile: false,
      maximized: false,
      dialogSize: 'dialog_card column',
    };
  },
  methods: {
    show() {
      this.$refs.dialog.show();
    },
    hide() {
      this.$refs.dialog.hide();
    },
    submit() {
      this.$emit('submit');
    },
  },
  mounted() {
    this.mobile = this.$q.platform.is.mobile;
    if (this.mobile) {
      this.dialogSize = 'dialog_full column';
      this.maximized = true;
    } else {
      this.dialogSize = 'dialog_card column';
      this.maximized = false;
    }
  },
};
</script>

<style scoped lang="stylus"></style>
